﻿@page "/tests/tooltip";
@page "/tests/tooltips";

<Row>
    <Column ColumnSize="ColumnSize.Is12">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Tooltip</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Display a tooltip attached to any kind of element with different positioning.</CardText>
            </CardBody>
            <CardBody>
                <Row>
                    <Column ColumnSize="ColumnSize.Is6">
                        <Tooltip Text="Hello tooltip">
                            <Button Color="Color.Primary">Tooltip</Button>
                        </Tooltip>
                        <Tooltip Text="Tooltip with a long Text. So we use Multiline modifier to force multiline display." Multiline>
                            <Button Color="Color.Primary">Multiline Tooltip</Button>
                        </Tooltip>
                        <Tooltip Text="Hello faded tooltip" Fade>
                            <Button Color="Color.Primary">Fade Tooltip</Button>
                        </Tooltip>
                        <Tooltip Text="Tooltip text" AlwaysActive>
                            <Button Color="Color.Primary">Always Active</Button>
                        </Tooltip>
                        <Tooltip Text="Tooltip text" ShowArrow="false">
                            <Button Color="Color.Primary">No Arrow</Button>
                        </Tooltip>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is2">
                        <Field>
                            <Tooltip Text="Hello tooltip">
                                <TextEdit></TextEdit>
                            </Tooltip>
                        </Field>
                        <Field>
                            <Div ElementId="tooltip-custom-target">
                                Trigger target vs
                                <Tooltip Text="I'm a tooltip!" TriggerTargetId="tooltip-custom-target" Inline>
                                    <Badge Color="Color.Warning">positioning target</Badge>
                                </Tooltip>
                            </Div>
                        </Field>
                    </Column>
                </Row>
            </CardBody>
            <CardBody>
                <Row>
                    <Column>
                        <Tooltip Text="Hello tooltip" Placement="TooltipPlacement.Left" ShowArrow="false">
                            <Button Color="Color.Primary">Left</Button>
                        </Tooltip>
                        <Tooltip Text="Hello tooltip" Placement="TooltipPlacement.Top" ShowArrow="false">
                            <Button Color="Color.Primary">Top</Button>
                        </Tooltip>
                        <Tooltip Text="Hello tooltip" Placement="TooltipPlacement.Bottom" ShowArrow="false">
                            <Button Color="Color.Primary">Bottom</Button>
                        </Tooltip>
                        <Tooltip Text="Hello tooltip" Placement="TooltipPlacement.Right" ShowArrow="false">
                            <Button Color="Color.Primary">Right</Button>
                        </Tooltip>
                        <Tooltip Text="Hello tooltip" Placement="TooltipPlacement.TopStart" ShowArrow="false">
                            <Button Color="Color.Primary" Padding="Padding.Is5.OnX">Tooltip at top start</Button>
                        </Tooltip>
                        <Tooltip Text="Hello tooltip" Placement="TooltipPlacement.TopEnd" ShowArrow="false">
                            <Button Color="Color.Primary" Padding="Padding.Is5.OnX">Tooltip at top end</Button>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="<span style='color: aqua;'>Hello</span>, this is a <strong>bolded content</strong>!">
                            <Button Color="Color.Primary">Html content</Button>
                        </Tooltip>
                    </Column>
                </Row>
            </CardBody>
            <CardBody>
                <CardText>Tooltips can also be triggered by <code>click</code> or <code>focus</code> events.</CardText>
                <Row>
                    <Column>
                        <Tooltip Text="I'm a tooltip!" Trigger="TooltipTrigger.Click">
                            <Button Color="Color.Primary">Click</Button>
                        </Tooltip>
                        <Tooltip Text="I'm a tooltip!" Trigger="TooltipTrigger.Focus">
                            <Button Color="Color.Primary">Focus</Button>
                        </Tooltip>
                        <Tooltip Text="I'm a tooltip!" Trigger="TooltipTrigger.MouseEnterClick">
                            <Button Color="Color.Primary">MouseEnterClick</Button>
                        </Tooltip>
                    </Column>
                </Row>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Placement</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Tooltips can be placed in four base ways in relation to the reference element. Additionally, the tooltip can be shifted along the axis using the suffix <Code>Start</Code> or <Code>End</Code>.</CardText>
            </CardBody>
            <CardBody>
                <Row RowColumns="RowColumns.Are3">
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.Top">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Top</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.TopStart">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Top Start</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.TopEnd">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Top End</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.Bottom">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Bottom</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.BottomStart">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Bottom Start</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.BottomEnd">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Bottom End</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.Left">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Left</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.LeftStart">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Left Start</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.LeftEnd">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Left End</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.Right">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Right</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.RightStart">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Right Start</Alert>
                        </Tooltip>
                    </Column>
                    <Column>
                        <Tooltip Text="Tooltip text" Placement="TooltipPlacement.RightEnd">
                            <Alert Color="Color.Primary" Visible Height="Height.Px(60)" Flex="Flex.JustifyContent.Center.AlignItems.Center">Right End</Alert>
                        </Tooltip>
                    </Column>
                </Row>
            </CardBody>
        </Card>
    </Column>
</Row>